<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title>致一年未见的你</title>
	<link rel="stylesheet" href="css/common.css">
	<style type="text/css">
		body{background: none;}
		.sucwrap{padding:2% 10%;color:#fff;background: url(images/suc_02.png) no-repeat;background-size: 100% 100%;}
		.suc_tip{font-size: 16px;font-weight: bold}
		.footer{position: absolute;bottom:0;}
		/*model 样式*/
		.model{
			width: 100%;
		    height: 100%;
		    background: rgba(0, 0, 0, 0.9);
		    position: fixed;
		    top: 0;
		    left: 0;
		    z-index:1;
		    display:block;
		}
		.model-wrap{
			position: absolute;
			left:50%;
			top:50%;
			transform: translate(-50%, -50%);
			width:310px;
			background: #fff;
			color: #838282;
			background: -webkit-linear-gradient(top, #6fc8e4, #fff);
		}
		.top_pic{
			margin-top: -33px;
		}
			
		 .pic_bg{
		 	position: relative;
    		bottom: -15px;
		 }
		 .pic_boy{
		 	width:60%;
		 	margin:0 auto;
		 }
		 .pic_word{
		 	width: 90%;
		 	margin:30px auto;
		 }
	</style>
</head>
<body>
	<div class="pic">
		<img src="images/suc_01.png">
	</div>
	<div class="sucwrap">
		<p>券号：02020202</p>
		<div class="center suc_tip marginY-30">
			请于2017年9月30日前进行预约，不然就失效了！
		</div>
		<div class="paddB-20">快点戳下面预约按钮去预约，到店后出示券号即可享受高端动力系统养护套餐咯。</div>
	</div>
	<div class="width-80 pic marginY-30 auto">
		<img src="images/suc_btn.png" alt="">
	</div>
	<div class="pic footer">
		<img src="images/footer.png" alt="">
	</div>
	<!-- model start-->
	<div class="model">
		<div class="model-wrap">
			<div class="pic top_pic">
				<img src="images/fail_01.png" alt="">
			</div>
			<div class="pic pic_boy">
				<img src="images/boy.png" alt="">
			</div>
			<div class="pic pic_word">
				<img src="images/word.png" alt="">
			</div>
			<div class="pic pic_bg">
				<img src="images/suc_04.png" alt="">
			</div>
		</div>
	</div>
	<!-- model end-->	
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
	$(function(){
		$('.triangle-down').on('click',function(){
			 var $this = $(this).prev().children('.list-item');
			if($this.hasClass('b')){
				$(this).prev().children('.list-item').removeClass('b');
			}else{
				$(this).prev().children('.list-item').addClass('b');
			}
		});
	})
</script>
</html>